<template>
	<view class="income-withdrawal">
		<NavBar title="收益提现" :isBack="true"></NavBar>
		<view class="content">
           <view class="withdrawal-method">
			   <view class="title">提现方式</view>
			   <view v-if="routerState" class="card">
				   提现至微信零钱
			   </view>
			   <view v-else class="card" @click="toBankCard">
				   <view>中国建设银行银行卡</view>
				   <image src="@/static/goodDetail/back.png"></image>
			   </view>
		   </view>
		   <view class="withdrawal-price">
			   <view class="title">提现金额</view>
			   <view class="price">
				   <view>¥</view>
				    <input type="number" v-model.number="withdrawalMoney"   placeholder="请输入提现金额"/>
			   </view>
		   </view>
		   <view class="hint">该卡本次最多可提现￥10000</view>
		   <view class="btn">
			   <view class="confirm" @click="confirmWithdrawal">确认提现</view>
			   <view @click="toRecord">提现记录</view>
		   </view>
		</view>

	</view>
</template>

<script setup>
	import { usersWithdrawal } from '@/api/services.js'
	import { showToast } from '@/common/interactiveFeedback.js'
	import { reactive, toRefs, onMounted} from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	const state=reactive({
		withdrawalMoney:null,
		routerState:0 //0服务商提现  1收益明细提现
	})
	// 确认提现
  async function confirmWithdrawal(){
		if(!state.withdrawalMoney) return showToast("提现金额不能为空")
		const res=await usersWithdrawal({money:state.withdrawalMoney})
		if(res.code){
			showToast(res.msg)
		}
	}

	// 提现记录
	function toRecord(){
		uni.navigateTo({
			url:"/pages/services/withdrawalRecord"
		})
	}
	// 提现方式
	function toBankCard(){
		uni.navigateTo({
			url:"/pages/services/bankCardManagement"
		})
	}
	onLoad((option)=>{
		state.routerState=option.state
			console.log(option)
		})
	
	onMounted(()=>{
		
	})
	const { withdrawalMoney,routerState }=toRefs(state)
</script>

<style lang="scss" scoped>
	page{
		background: #FFFFFF;
	}
	.income-withdrawal {
		.content {
			position: relative;
			z-index: 1;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 0rpx 0rpx;
			padding: 68rpx 51rpx;
			.withdrawal-method{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				.card{
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 20rpx;
					color: #333333;
					image{
						width: 10rpx;
						height: 18rpx;
						margin-left: 12rpx;
					}
				}
			}
			.title{
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
			}
			.withdrawal-price{
				margin-bottom: 44rpx;
				padding-bottom: 14rpx;
				border-bottom: 1rpx solid #F5F5F5;
				.price{
					display: flex;
					align-items: center;
					font-weight: 800;
					font-size: 30rpx;
					color: #222222;
					margin-top: 42rpx;
				}
				input{
					margin-left: 10rpx;
				}
			}
			.hint{
				font-weight: 500;
				font-size: 20rpx;
				color: #333333;
			}
	     .btn{
			 text-align: center;
			 margin-top: 65rpx;
			 font-weight: 500;
			 font-size: 26rpx;
			 color: #58DBCF;
			 .confirm{
				 width: 648rpx;
				 height: 66rpx;
				 line-height: 66rpx;
				 background: #58DBCF;
				 border-radius: 500rpx 500rpx 500rpx 500rpx;
				 font-weight: 800;
				 font-size: 30rpx;
				 color: #FFFFFF;
				 margin-bottom: 24rpx;
			 }
		 }
		}
	}
</style>